<template>
  <div>
    <h1>App</h1>

    <ul>
      <li>
        <!-- <a href="#/home/list">Home</a> -->
        <RouterLink to="/home/list">Home</RouterLink>
      </li>
      <li>
        <!-- <a href="#/shop/1">Shop</a> -->
        <RouterLink to="/shop/1">Shop</RouterLink>
      </li>
      <li>
        <!-- <a href="#/user/id/1">User</a> -->
        <RouterLink to="/user/id/1">User</RouterLink>
      </li>
    </ul>
    <!-- <component :is="comName"></component> -->
    <RouterView></RouterView>
  </div>
</template>
<script>
import Home from './Home.vue';
import Shop from './Shop.vue';
import User from './User.vue';

export default {
  components: {
    Home, Shop, User
  },
  data() {
    return {
      comName: 'Home',
      // routes: {
      //   // 路由表
      //   '/home/list': 'Home', 
      //   '/shop/1': 'Shop',
      //   '/user/id/1': 'User',
      // }
    };
  },
  mounted() {
    console.log(this.$router);
    console.log(this.$route);//location.hash
    console.log(this.$info);
    // window.onhashchange = () => {
    //   const hash = window.location.hash.slice(1);
    //   this.comName = this.routes[hash];
    // };
  }

};
</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>